<template>
  <div class="defineQuotaForm">
    <el-form
      ref="newQuotaForm"
      :rules="rules"
      :model="newQuotaForm"
      label-width="100px"
    >
      <el-form-item label="预指标名称" prop="name">
        <el-input v-model="newQuotaForm.name"></el-input>
      </el-form-item>
       <el-form-item label="预指标简称" prop="uname">
        <el-input v-model="newQuotaForm.uname"></el-input>
      </el-form-item>
      <el-form-item label="预指标描述" prop="description">
        <el-input v-model="newQuotaForm.description"></el-input>
      </el-form-item>
      <el-form-item label="预指标代码" prop="code">
        <el-input v-model="newQuotaForm.code"></el-input>
      </el-form-item>
      <el-form-item label="预指标标签" prop="lable">
        <el-input v-model="newQuotaForm.lable"></el-input>
      </el-form-item>
      <el-form-item label="预指标类型" prop="type">
        <el-select v-model="newQuotaForm.type" placeholder="请选择预指标类型">
          <el-option
            v-for="item in quotaType"
            :key="item.label"
            :label="item.value"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="createQuota('newQuotaForm')"
        >立即创建</el-button
      >
      <el-button @click="$emit('close')">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { saveQuota, queryQuotaType } from '@/api/quota/define/define.js'
export default {
  name:"defineQuotaForm",
  props: {
    themeId:{
      type:Number
    }
  },
  data() {
    return {
      newQuotaForm: {
        description: null,
        lable: null,
        name: null,
        type: null,
        stype: '5',
        uname: null,
        code: null,
        themeSetId:null,
        parentId:0
      },
      rules: {
        description: [
            { required: true, message: '请输入预指标描述', trigger: 'blur' }
          ],
        lable: [{ required: true, message: '请输入预指标标签', trigger: 'blur' }],
        name:  [{ required: true, message: '请输入预指标名称', trigger: 'blur' }],
        type:  [{ required: true, message: '请选择预指标类型', trigger: 'blur' }],
        uname:  [{ required: true, message: '请输入预指标简称', trigger: 'blur' }],
        code:  [{ required: true, message: '请输入预指标代码', trigger: 'blur' }]
       },
      quotaType: [],
    };
  },
  created(){
    queryQuotaType().then((res)=>{
      this.quotaType = res.data
    })
  },
  methods: {
     createQuota(formName) {
         //表单验证
         this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let arr = []
            this.newQuotaForm.themeSetId = this.themeId
            arr.push(this.newQuotaForm)
            try {
              await saveQuota(arr)
              this.$message('添加预指标成功');
              this.$emit("loadDefineList")
              this.$emit('close')
            } catch (error) {
              console.log(error)
              this.$message('添加预指标失败');
            }
               } else {
                this.$message('添加预指标失败');
               }
          });
     }
  }
};
</script>
<style lang="less" scoped>
.defineQuotaForm {
  .el-form {
    margin-left: 17%;
  }
  .dialog-footer {
    text-align: center;
  }
  .el-input,
  .el-select {
    width: 65%;
  }
}
</style>
